<template>
  <el-dialog title="变更医生" :visible="value" @close="handleClose">
    <el-table border stripe :data="data.yiyaItemBillingExtends">
      <el-table-column
        label="项目名称"
        align="center"
        prop="itemName"
        min-width="160"
      ></el-table-column>
      <el-table-column label="门店" align="center">
        {{ data.yiyaBillingMain.clinic }}
      </el-table-column>
      <el-table-column label="医生" align="center" prop="doctor">
      </el-table-column>
      <el-table-column label="分诊业绩" align="center" prop="projectReceivable">
        <template slot-scope="scope">
          {{ scope.row.projectReceivable }}.00
        </template>
      </el-table-column>
      <el-table-column label="变更医生" align="center" min-width="120">
        <el-select
          v-model="scope.row.changeDoctor"
          slot-scope="scope"
          placeholder="请选择"
        >
          <el-option
            v-for="item in doctorOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { listStaff } from '@/api/services/common'
import { mapState } from 'vuex'
import { updateBillingProject } from '@/api/services/billingProject'

export default {
  name: 'ChangeDoctor',
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      doctorOptions: [],
    }
  },
  computed: {
    ...mapState({
      clinicId: (state) => state.clinic.clinicId,
    }),
  },
  watch: {
    value(val) {
      if (val) {
        this.init()
      }
    },
  },
  mounted() {
    this.getListStaff()
  },
  methods: {
    init() {
      this.data.yiyaItemBillingExtends = this.data.yiyaItemBillingExtends.map(
        (item) => {
          return {
            ...item,
            changeDoctor: item.doctor,
          }
        }
      )
    },
    handleClose() {
      this.$emit('close', false)
    },
    /**
     * 获取医生列表
     */
    async getListStaff() {
      const { data } = await listStaff({
        deptId: +this.clinicId,
        postname: '医生',
      })
      this.doctorOptions = data.map(({ userName }) => ({
        label: userName,
        value: userName,
      }))
    },
    async handleSubmit() {
      await this.$confirm('是否确认变更医生?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      try {
        this.loading = true
        const projects = this.data.yiyaItemBillingExtends.map(
          ({ id, changeDoctor }) => ({
            id,
            doctor: changeDoctor,
          })
        )
        while (projects.length) {
          await updateBillingProject(projects.pop())
        }
        this.msgSuccess('修改成功')
        this.handleClose()
        this.$emit('ok')
      } finally {
        this.loading = false
      }
    },
  },
}
</script>

<style scoped></style>
